import React, { useEffect, useState } from 'react';
import { Button, Image, Text, View } from '@tarojs/components';
import './index.less';
import { observer } from 'mobx-react-lite';
import store from '@/src/store';
interface ActivityItemProps {
  dataList: any;
  list?: boolean;
  goDetail: (str: string) => void;
  mine?: boolean;
}
const ActivityItem: React.FC<ActivityItemProps> = ({
  dataList,
  list,
  goDetail,
  mine,
}) => {
  return (
    <View
      className="home-activity-content"
      style={{
        marginTop: list ? (store.commonStore.isIos ? '49px' : '70px') : '0',
        marginBottom: `${store.commonStore.safeAreaBottom}rpx`,
      }}
    >
      {dataList.map((item: any, index: any) => {
        return (
          <View
            className={`home-activity-item home-activity-item-${index === dataList.length - 1 ? 'last' : ''}`}
            key={`${item.activityType}-${index}`}
            onClick={() => goDetail(item)}
            style={{ borderBottom: list ? '' : '0.5px solid rgba(0,0,0,.1)' }}
          >
            <View
              className="item-left"
              style={{
                background: `url(${item.coverImageUrl})`,
                backgroundSize: 'cover',
              }}
            >
              <View className="item-left-type">
                ·
                <Text className="item-left-type-desc">
                  {item.activityType[0]}
                </Text>
                ·
              </View>
            </View>
            <View
              className="item-right"
              style={{
                flexDirection: 'column',
                background: list ? '#fff' : 'transparent',
              }}
            >
              <View className="join-time">
                {item.activityStatus === 1 && (
                  <Text className="join-entry">报名中</Text>
                )}
                {item.activityStatus === 0 && (
                  <Text className="join-progress">报名结束</Text>
                )}
                {item.activityStatus === 2 && (
                  <Text className="join-progress">进行中</Text>
                )}
                {item.activityStatus === 3 && (
                  <Text className="join-end">已结束</Text>
                )}
                {item.activityStatus === 4 && (
                  <Text className="join-end">活动终止</Text>
                )}
                {item.activityStatus === 1 && item.registrationEndTime}
              </View>
              <View className={'join-title clamp2'}>{item.title}</View>
              <View className="join-position">
                <View>
                  <Image
                    src={
                      'https://file.linkcook.cn/image/wineMiniProgram/activity/position.png'
                    }
                  />
                </View>

                <View className="join-position-desc clamp2">
                  {item.activityAddress}
                </View>
              </View>
              {!mine && <View className="divider"></View>}
              <View className="join-price">
                入场费：
                <Text className="join-money">{item.activityCost}</Text>元/位
              </View>
              {!list && item.activityStatus === 3 && (
                <View className="join-more-btn">
                  <View className="join-more">
                    <Button className="join-detail">活动回顾</Button>
                  </View>
                </View>
              )}
              {list && (
                <View className="join-more">
                  <Button className="join-detail">查看详情</Button>
                </View>
              )}
            </View>
          </View>
        );
      })}
    </View>
  );
};

export default observer(ActivityItem);
